<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="no-content" v-if="!data.list||data.list.length==0">暂无记录</view>
        <view style="padding:72upx 24upx 0 24upx;position:relative" v-else>
            <image class="avatar" :src="data.list['card_pic_url']"></image>
            <view class="flex-col flex-y-center detail">
                <view style="color:#353535;font-size:17pt;padding-bottom:48upx">{{data.list['card_name']}}</view>
                <image @tap="goodsQrcodeClick" :data-src="data.qrcode" :src="data.qrcode" style="display:block;height:400upx;width:400upx;" v-if="data.use===0"></image>
                <view class="flex-x-center error" v-if="data.use===1">已失效</view>
            </view>
            <image class="bg" src="/static/images/coupon-details.png"></image>
            <view class="present">
                <view class="detail-name">使用说明</view>
                <view class="detail-manual">{{data.list.card_content}}</view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {},
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var t = this, a = e.user_card_id;
        a && (myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.card_detail,
            data: {
                user_card_id: a
            },
            success: function(e) {
                0 == e.code && (0 === e.data.list.is_use && t.getQrcode(a), t.setData({
                    use: e.data.list.is_use,
                    list: e.data.list
                }));
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        }));
    },
		methods: {
			getQrcode: function(e) {
        var t = this;
        myVue.getApp.request({
            url: myVue.getApp.api.user.card_qrcode,
            data: {
                user_card_id: e
            },
            success: function(e) {
                0 == e.code ? t.setData({
                    qrcode: e.data.url
                }) : t.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1
                });
            }
        });
    },
    goodsQrcodeClick: function(e) {
        var t = e.currentTarget.dataset.src;
        myVue.getApp.core.previewImage({
            urls: [ t ]
        });
    }
		},
	}
</script>

<style scoped>
page {
    background: #ff7b33;
}

.detail-name {
    color: #999999;
    padding-bottom: 20upx;
}

.detail-manual {
    color: #353535;
    padding-bottom: 40upx;
}

.avatar {
    position: absolute;
    left: 50%;
    display: block;
    height: 88upx;
    width: 88upx;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.detail {
    background: #ffffff;
    padding: 98upx 40upx 24upx 40upx;
    border-radius: 16upx 16upx 0 0;
}

.error {
    margin-top: 32upx;
    border-radius: 32upx;
    background: #f7f7f7;
    color: #999999;
    line-height: 64upx;
    width: 240upx;
}

.present {
    background: #ffffff;
    padding: 24upx 40upx 14upx 40upx;
    border-radius: 0 0 16upx 16upx;
}

.bg {
    display: block;
    height: 48upx;
    width: 100%;
}

.no-content {
    color: #888;
    padding: 100upx 0 0 0;
    text-align: center;
}
</style>
